<!-- 项目管理 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">
      落地页管理
      <span class="red fz12">先复制链接生成了链接才会有小程序二维码</span>
    </p>
    <!-- sonRouter="yybureauFormationBJ" 为跳转新的页面编辑 -->
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      :czFun="czFun"
      ref="databale"
    ></dxtable>
  </div>
</template>
<script lang="ts" setup>
import dxtable from "../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { dxget, dxpost } from "../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive } from "vue";
const databale = ref();
const initeer = () => {
  databale.value.initDataExpose();
};
let dataJson = [
  {
    title: "id",
    key: "id",
    width: 100,
  },

  {
    title: "名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 24,
    key: "name",
    width: "",
    search: false,
    istable: true,
    required: false,
    render: (row) => {
      try {
        row.xq = row.xq.split(",");
      } catch (e) {}
      return row.name;
    },
  },
  {
    title: "小程序二维码",
    icon: "dx-shurukuang",
    key: "qcurl",
    render: (row) => {
      if (row.qcurl) {
        return h(NImage, {
          class: "xcxzrty",
          src: "https://duxinggj.com/public/QRcode/imgqr?&text=" + row.qcurl,
        });
      } else {
        return "";
      }
    },
  },
  {
    title: "企业二维码",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 12,
    key: "qywwm",
    width: "",
    search: false,
    istable: true,
    required: false,
  },

  {
    title: "排序",
    width: 100,
    render: (row) => {
      row.sjk = "luodiye"; //数据库
      row.databaseName = "dxlist"; //表名
      return h(sort, {
        row,
        onCallBack: () => {
          initeer();
        },
      });
    },
  },
  {
    title: "添加时间",
    key: "addTime",
    width: 150,
  },
];

const qx = {
  DeletePermissionID: "luodiyeindexdel", //删除
  EditPermissionIdentifier: "luodiyeindexbj", // 编辑
  NewPermissionIdentifier: "luodiyeindexxz", // 新建
  ViewPermissionID: "luodiyeindexck", // 查看
};
const portUrl = "luodiye/dxlist";

let formJson = reactive([
  {
    title: "名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 14,
    key: "name",
    width: "",
    search: false,
    istable: true,
    required: true,
  },
  {
    title: "支付金额",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 10,
    key: "zhifuje",
    width: "",
    search: false,
    istable: true,
  },

  {
    title: "企业二维码",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 8,
    key: "qywwm",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "详情图片",
    type: "imglist",
    val: [],
    icon: "dx-ai-img-list",
    span: 24,
    key: "xq",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "按钮名称",
    type: "input",
    val: "立即预约",
    icon: "dx-shurukuang",
    span: 12,
    key: "btnname",
    width: "",
    search: false,
    istable: true,
    required: true,
  },
  {
    title: "是否跳到",
    type: "radio",
    val: "1",
    icon: "dx-shurukuang",
    span: 12,
    key: "btnistd",
    opt: [
      {
        label: "是",
        value: "1",
      },
      {
        label: "否",
        value: "2",
      },
    ],
  }, {
    title: "按钮颜色",
    type: "color",
    val:"#FF1416",
    span: 12,
    key: "btncolor",
  },
]);
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
         /**  if (row.qcurl) {
              navigator.clipboard.writeText(row.qcurl);
              window.$message.success("复制成功");
              return;
            }
            */  
            const { data } = await dxget(
              "https://duxinggj.com/wechar/xcx/generateUrllink?id=" + row.id
            );
            navigator.clipboard.writeText(data);
            window.$message.success("复制成功");
            await dxpost(portUrl, { id: row.id, qcurl: data }, "put");
            initeer();
          },
        },
        "复制链接"
      ),
    ];
  },
};

// 获取字典内容
// const xtgxxmfl = async () => {
//   const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'xtgxxmfl' })
//   dataJson[2].options = [
//     {
//       label: "全部",
//       value: ""
//     },
//     ...data
//   ]
//   formJson[2].options = data
//   xmlxSelect.value = data
//   console.log(data);
// }
// xtgxxmfl()
</script>
<style scoped></style>
